<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片热点链接</title>
  </head>
  <body>
    <!-- 
      图片热点链接可以让一张图片上实现多个超链接,点击图片不同的位置,可以跳转到不同的目标

      具体操作步骤:
      1.在img标签中添加usemap属性并且指定一个名称
      2.使用map标签,name属性和img标签中usemap同名,注意#的书写
      3.在map标签中通过area标签来定义图片上触发链接的区域
          shape属性表示链接形状,rect矩形,circle圆形,poly多边形
          coords属性表示区域的坐标位置和大小
                矩形时需要提供四个参数,分别表示左上角顶点和右下角顶点的横杠纵坐标
                圆形时需要提供三个参数,分别表示圆心横纵坐标以及半径
                多边形时需要提供2n个参数,分别表示每一个点的横纵坐标,坐标点推荐按序排列
          href属性表示当前区域跳转的目标      

      注意: 所有测量必须保证浏览器的缩放比是100%的情况下进行!!!          
     -->
    <img src="img/cdzj.jpg" usemap="#film" />
    <map name="film">
      <area
        shape="rect"
        coords="90,26,410,185"
        href="https://baike.baidu.com/item/%E5%88%98%E5%BE%B7%E5%8D%8E/114923?fromModule=lemma_search-box"
      />
      <area
        shape="rect"
        coords="90,185,410,265"
        href="https://baike.baidu.com/item/%E6%8B%86%E5%BC%B9%E4%B8%93%E5%AE%B62?fromModule=lemma_search-box"
      />
      <area
        shape="rect"
        coords="90,265,410,475"
        href="https://baike.baidu.com/item/%E5%88%98%E9%9D%92%E4%BA%91/25438?fromModule=lemma_search-box"
      />
    </map>
  </body>
</html>
